<template>
  <div>
    <div class="home_container">
      <el-row :gutter="10">
        <el-col :span="16">
          <div>
            <!-- 轮播图 -->
            <el-carousel height="250px">
              <el-carousel-item v-for="item in 4" :key="item">
                <img
                  class="swiper_img"
                  src="https://hbimg.huabanimg.com/6133026ec677161d1dbda330b57e361c828ad2e1a7308-tYs4dQ_fw658/format/webp"
                  alt
                  srcset
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="progress_select">
            <el-row :gutter="10">
              <el-col :span="6">
                <div class="select_item">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      选择工程单位
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头黄金糕</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉黄金糕</el-dropdown-item>
                      <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="select_item">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      选择工程单位
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头黄金糕</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉黄金糕</el-dropdown-item>
                      <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="select_item">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      选择工程单位
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>黄金糕黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头黄金糕</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉黄金糕</el-dropdown-item>
                      <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
              <el-col :span="6">
                <div style="text-align: right;">
                  <el-button type="danger">前往查看>></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="progress_box">
            <!-- 标题 -->
            <div class="message_head">
              <div class="halving_line"></div>
              <span class="message_title">总工程师进度汇总/Enterprises to the bidding</span>
            </div>
            <div class="progress_echarts">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="echarts_box" ref="myCharts" id="pgEcherts"></div>
                </el-col>
                <el-col :span="12">
                  <div class="echarts_box">
                    <div class="desc_title">
                      <div class="desc_paralle"></div>
                      <div class="desc_paralle"></div>
                      <div class="title">施工进度详细汇报</div>
                    </div>
                    <div class="desc_item">
                      <div class="time">2020-08-01 15:23</div>
                      <div class="time">消防栓安装</div>
                      <div class="time">已完成20%</div>
                    </div>
                    <div class="desc_item">
                      <div class="time">2020-08-01 15:23</div>
                      <div class="time">消防栓安装</div>
                      <div class="time">已完成20%</div>
                    </div>
                    <div class="desc_item">
                      <div class="time">2020-08-01 15:23</div>
                      <div class="time">消防栓安装</div>
                      <div class="time">已完成20%</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="message_box">
            <!-- 最新资讯 -->
            <div class="message_item">
              <!-- 标题 -->
              <div class="message_head">
                <div class="halving_line"></div>
                <span class="message_title">最新资讯/The latest information</span>
              </div>
              <!-- 标签头 -->
              <el-tabs class="message_tabs">
                <el-tab-pane label="新闻资讯" name="first" style="font-size: 13px;">
                  <div class="message_desc">
                    <div class="dot_box"></div>
                    <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                  </div>
                  <div class="message_desc">
                    <div class="dot_box"></div>
                    <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                  </div>
                  <div class="message_desc">
                    <div class="dot_box"></div>
                    <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                  </div>
                  <div class="message_desc">
                    <div class="dot_box"></div>
                    <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="失信公示" name="second" style="font-size: 13px;">失信公示</el-tab-pane>
                <el-tab-pane label="平台消息" name="third" style="font-size: 13px;">平台消息</el-tab-pane>
              </el-tabs>
            </div>
            <!-- 企业招标 -->
            <div class style="margin-top:10px">
              <!-- 标题 -->
              <div class="message_head">
                <div class="halving_line"></div>
                <span class="message_title">企业招标/Enterprises to the bidding</span>
              </div>
              <div>
                <div class="message_desc">
                  <div class="dot_box"></div>
                  <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                </div>
                <div class="message_desc">
                  <div class="dot_box"></div>
                  <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                </div>
                <div class="message_desc">
                  <div class="dot_box"></div>
                  <div class="message_text">云南新冠肺炎最先疫情，累计201人，死亡2人，治愈200人</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="procurement_box">
            <div class="message_head">
              <div class="halving_line"></div>
              <span class="message_title">采购管理/Purchasing and supply management</span>
            </div>
            <div class="table_box">
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                size="mini"
                :border="true"
                highlight-current-row
              >
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="procurement_box">
            <div class="message_head">
              <div class="halving_line"></div>
              <span class="message_title">物资管理/Material management</span>
            </div>
            <div class="table_box">
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                size="mini"
                :border="true"
                highlight-current-row
              >
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
              </el-table>
              <div class="mt_echarts" id="mtEcharts" ref="mtEcharts"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      radio: 1,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  created() {},

  mounted() {
    this.initEcherts();
    this.initmtEcharts();
  },

  components: {},

  computed: {},

  methods: {
    //初始化物资库存数据
    initmtEcharts() {
      const myCharts = this.$echarts.init(this.$refs.mtEcharts);
      let options = {
        xAxis: {
          type: "category",
          data: [
            "灭火器",
            "反光衣",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "灭火器",
            "反光衣",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120,
              200,
              150,
              80,
              70,
              110,
              130,
              120,
              200,
              150,
              80,
              70,
              110,
              130,
            ],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      };
      myCharts.setOption(options);
    },
    //初始化工程进度图表
    initEcherts() {
      const myCharts = this.$echarts.init(this.$refs.myCharts);
      let options = {
        title: {
          text: "工程进度完成统计",
          subtext: "完成进度",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["已完成", "未完成"],
        },
        series: [
          {
            name: "完成进度",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 200, name: "已完成" },
              { value: 800, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myCharts.setOption(options);
    },
  },
};
</script>
<style lang='scss' scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #d41d31;
}
.el-icon-arrow-down {
  font-size: 15px;
}
.desc_title {
  border-bottom: 1px solid #ebeef5;
  padding: 5px 10px 8px 10px;
  display: flex;
  flex-direction: row;
  .title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-left: 10px;
  }
  .desc_paralle {
    width: 8px;
    height: 22px;
    transform: skewX(20deg);
    margin-left: 5px;
  }
}
.mt_echarts {
  margin-top: 5px;
  height: 350px;
  width: 100%;
}
.desc_item {
  width: 100%;
  padding: 5px 10px 5px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .time {
    width: 33%;
    font-size: 14px;
    color: #333;
    overflow: hidden;
  }
}
.progress_echarts {
  margin-top: 5px;
  .echarts_box {
    height: 300px;
    width: 100%;
  }
}
.vab-ad {
  height: 30px;
  padding-right: $base-padding;
  padding-left: $base-padding;
  line-height: 30px;
  font-size: 13px;
  cursor: pointer;
  background: #ffffff;

  a {
    color: #000;
    margin-left: 10px;
  }
}
.home_container {
  background: #f6f8f9;
}
.swiper_img {
  border-radius: 3px;
  width: 100%;
  height: 250px;
  box-shadow: 0 2px 12px 0 #f6f8f9;
}
.progress_select {
  margin-top: 10px;
  background: url("../../assets/homeimages/homeline.jpg");
  background-size: cover;
  padding: 5px 10px 5px 10px;
  height: 43px;
  .select_item {
    text-align: center;
    line-height: 30px;
  }
}
.progress_line {
  height: 350px;
  border: 1px solid #f5f5f5;
  padding: 10px;
  overflow: auto;
  margin-top: 5px;
  border: 1px solid #d41d31;
}
.table_box {
  margin-top: 10px;
}
.procurement_box {
  margin-top: 10px;
  height: 600px;
  background: #ffffff;
  border-radius: 3px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 #f6f8f9;
  .message_head {
    display: flex;
    flex-direction: row;
    .halving_line {
      height: 25px;
      width: 4px;
      background: #d41d31;
    }
    .message_title {
      font-size: 17px;
      color: #000;
      font-weight: bold;
      margin-left: 5px;
    }
  }
}
.progress_box {
  margin-top: 10px;
  border-radius: 3px;
  padding: 10px;
  height: 400px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 #f6f8f9;
  .message_head {
    display: flex;
    flex-direction: row;
    .halving_line {
      height: 25px;
      width: 4px;
      background: #d41d31;
    }
    .message_title {
      font-size: 17px;
      color: #000;
      font-weight: bold;
      margin-left: 5px;
    }
  }
}
.message_tabs {
  font-size: 15px;
}
.message_desc {
  height: 30px;
  display: flex;
  background: #f5f5f5;
  flex-direction: row;
  padding: 0px 5px 0px 5px;
  margin-bottom: 5px;
}
.message_item {
  border-bottom: 3px dashed #ebeef5;
  height: 350px;
}
.dot_box {
  border: 1px solid #333;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #333;
  margin-top: 9px;
}
.message_text {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  margin-left: 5px;
  overflow: hidden;
}
.message_box {
  height: 710px;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 #f6f8f9;
  padding: 10px;
  .message_head {
    display: flex;
    flex-direction: row;
    .halving_line {
      height: 25px;
      width: 4px;
      background: #d41d31;
    }
    .message_title {
      font-size: 17px;
      color: #000;
      font-weight: bold;
      margin-left: 5px;
    }
  }
}
</style>